<html>
  <head>
    <title>Ferrishot | Open Source Screenshot Software</title>
    <meta name="description" content="Ferrishot is a free and open-source, cross-platform tool to take screenshots"></meta>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="icons/Ferrishot.svg">
  </head>
  <style>
    * { margin: 0; padding: 0; }
    :root {
      --accent-color: #ab6137;
      --accent-color-light: #dea584;
      --background: #fff8f0;
      --background-dark: #fae8d4;
      --text: #452601f0;
      --font: 'Courier New', Courier, monospace;
    }
    li { list-style: none; }
    h1, h2, h3, h4, h5, h6 { color: var(--accent-color); }
    h3, h4, h5, h6 { font-weight: normal; }

    .learn-more {
      text-decoration: underline;
      font-size: 0.8em;
      margin-top: 20px;
      margin-left: 6px;
      &::before {
        content: "→ "
      }
    }

    .install-button {
      width: 171px;
      a {
        background-color: var(--accent-color);
        color: var(--background);
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 16px 40px;
        border: none;
        cursor: pointer;
        font: inherit;
        svg {
          color: var(--background);
        }
        /* pressed effect */
        box-shadow: 3px 3px var(--text);
        &:active {
          transform: translateX(3px) translateY(3px);
          box-shadow: none;
          transition-property: transform box-shadow;
          transition-duration: 0.07s;
        }
      }
    }
  </style>
  <style>
    body {
      font-family: var(--font);
      background-color: var(--background);
      color: var(--text);
      display: flex;
      flex-direction: column;
    }
  </style>
  <body>
    <style>
      main {
        display: flex;
        align-self: center;
        flex-direction: column;
        max-width: 65ch;
        padding: 80px;
        @media (width <= 600px) {
          padding: 40px;
        }
        @media (width <= 400px) {
          padding: 20px;
        }
      }
    </style>
    <main>
      <style>
        #logo-container {
          display: flex;
          flex-direction: column;
          gap: 20px;
          #description {
            font-style: italic;
          }
          svg {
            color: var(--accent-color);
          }
        }
      </style>
      <div id="logo-container">
        <style>
          #logo {
            display: flex;
            gap: 10px;
            h1 {
              font-size: 26px;
              /* center text */
              margin-top: auto;
              margin-bottom: auto;
            }
          }
        </style>
        <div id="logo">
          <img src="assets/icons/Ferrishot.svg" id="logo" height="48" width="48"></img>
          <h1>ferrishot<h1>
        </div>
        <div id="description">
          <p>Intuitive, yet powerful screenshot software.</p>
          <p>Free and open source, written in Rust</p>
        </div>
        <style>
          #icons {
            a {
              text-decoration: none;
            }
          }
        </style>
        <div id="icons">
          <a href="https://github.com/nik-rev/ferrishot" title="Ferrishot Source Code on GitHub">
          <svg height="16px" width="16px" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9 1.4.3 2.6.4 3.8.4 8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1-8.4 1.9-15.9 2.7-22.6 2.7-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1 10.5 0 20-3.4 25.6-6 2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8 0 0 1.6-.5 5-.5 8.1 0 26.4 3.1 56.6 24.1 17.9-5.1 37-7.6 56.1-7.7 19 .1 38.2 2.6 56.1 7.7 30.2-21 48.5-24.1 56.6-24.1 3.4 0 5 .5 5 .5 12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5 1.2 0 2.6-.1 4-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z"></path></svg>    
          </a>
          <a href="https://discord.gg/hvaNHymCVy" title="Ferrishot Discord"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" height="16px" width="16px" xmlns="http://www.w3.org/2000/svg"><path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"></path></svg></a>
        </div>
      </div>
      <style>
        #first-install-button {
          width: 100%;
          display: flex;
          justify-content: end;
          @media (width <= 600px) {
            justify-content: center;
          }
          margin-top: 40px;
          margin-bottom: 80px;
          position: relative;
        }
      </style>
      <div id="first-install-button">
        <div class="install-button">
          <a href="https://github.com/nik-rev/ferrishot?tab=readme-ov-file#installation">Install<svg height="16px" width="16px" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 9h-4V3H9v6H5l7 8zM4 19h16v2H4z"></path></svg>
          </a>
        </div>
      </div>
      <style>
        #features {
          h2 {
            margin-bottom: 80px;
          }
          ul {
            gap: 40px;
            display: flex;
            flex-direction: column;
            li {
              display: flex;
              @media (width <= 600px) {
                flex-direction: column;
              }
              .description {
                margin-top: auto;
                margin-bottom: auto;
                width: 50%;
                @media (width <= 600px) {
                  width: 100%;
                }
                display: flex;
                flex-direction: column;
                h3 {
                  margin-bottom: 10px;
                }
              }
              .showcase {
                width: 50%;
                @media (width <= 600px) {
                  width: 100%;
                }
              }
              #qr_code {
                transform: scale(0.4) translateX(20%) translateY(10%);
                @media (width <= 600px) {
                  transform: scale(0.4) ;
                  margin-top: -120px;
                  margin-bottom: -120px;
                }
              }
              gap: 12px;
            }
          }
        }
      </style>
      <section id="features">
        <h2 class="title">
          # Features
        </h2>
        <ul>
          <li>
            <div class="description">
              <h3>Friendly and intuitive</h3>
              <p>Click and drag to create a selection</p>
              <a class="learn-more" href="https://github.com/nik-rev/ferrishot?tab=readme-ov-file#basic-usage">Learn more</a>
            </div>
            <video autoplay loop muted class="showcase" src="assets/Preview.mp4">
                A man moving his hands away from his forehead sideways, in a mind-explosion gesture. An overlaid animation enforces the explosion character.
            </video>
          </li>
          <li>
            <div class="description">
              <h3>Share in seconds</h3>
              <p>Upload your screenshot online with the click of a button</p>
              <a class="learn-more" href="https://github.com/nik-rev/ferrishot?tab=readme-ov-file#image-uploaded">Learn more</a>
            </div>
            <img id="qr_code" class="showcase" src="assets/qr-code.svg"></img>
          </li>
          <li>
            <div class="description">
              <h3>No mouse? No problem</h3>
              <p>Ferrishot is fully keyboard-controllable, we even have <font color="#4e8f20">vim motions</font>!</p>
              <a class="learn-more" href="https://github.com/nik-rev/ferrishot?tab=readme-ov-file#keyboard-control">Learn more</a>
            </div>
            <div id="cont">
              <style>
                #arrow-down {
                  transform: translateY(5px) rotate(10deg);
                }
                #cont {
                  width: 50%;
                  @media (width <= 600px) {
                    width: 100%;
                    margin-top: 40px;
                  }
                  font-size: 9px;
                  font-style: italic;

                  position: relative;
                    #des {
                      position: absolute;
                      top: -30px;
                      left: 30px;
                      transform: rotate(-1deg);
                      z-index: 10;
                      color: var(--text);
                    }
                }
              </style>
              <p id="des">
                <svg id="arrow-down" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 256 256" height="12px" width="12px" xmlns="http://www.w3.org/2000/svg"><path d="M212,32a12,12,0,0,1-12,12,84.09,84.09,0,0,0-84,84v67l27.51-27.52a12,12,0,0,1,17,17l-48,48a12,12,0,0,1-17,0l-48-48a12,12,0,0,1,17-17L92,195V128A108.12,108.12,0,0,1,200,20,12,12,0,0,1,212,32Z"></path></svg>
                select any area of the screen in 8 keys!</p>
                <video id="vid-3" autoplay loop muted width="100%" src="assets/instant-shot.mp4">
                    A man moving his hands away from his forehead sideways, in a mind-explosion gesture. An overlaid animation enforces the explosion character.
                </video>
            </div>
          </li>
        </ul>
      </section>
      <style>
        #final-install-button {
          margin-top: 120px;
          display: flex;
          margin-right: 60px;
          position: relative;
          justify-content: end;
          margin-bottom: 80px;
          @media (width <= 600px) {
            margin-top: 90px;
            margin-right: 45px;
            margin-bottom: 40px;
          }
        }
        #decoration-Infinity {
          position: absolute;
          left: 10px;
          z-index: -10;
          @media (width <= 600px) {
            width: 50px;
            left: 0px;
            top: 40px;
          }
        }
      </style>
      <div id="final-install-button">
          <svg id="decoration-Infinity" width="150" height="150" viewBox="0 0 200 200" stroke="#ab6137" fill="none" stroke-width="3.0" stroke-linecap="round" stroke-linejoin="round"  xmlns="http://www.w3.org/2000/svg">
              <path fill="#fae8d4" stroke="none" transform="translate(-10,-10)" d="m111.148 75.845 1.486 3.167 1.27-3.259c5.694-14.606 12.246-23.46 18.441-28.098 6.157-4.609 11.893-5.028 16.306-2.984 8.904 4.125 13.922 19.282 4.771 36.13l-45.18 75.123-59.83-65.305c-6.355-9.584-7.116-18.587-4.502-25.868 2.636-7.345 8.781-13.144 16.591-16.095 15.505-5.857 37.688-.441 50.647 27.19Z"/><path d="m111.148 75.845 1.486 3.167 1.27-3.259c5.694-14.606 12.246-23.46 18.441-28.098 6.157-4.609 11.893-5.028 16.306-2.984 8.904 4.125 13.922 19.282 4.771 36.13l-45.18 75.123-59.83-65.305c-6.355-9.584-7.116-18.587-4.502-25.868 2.636-7.345 8.781-13.144 16.591-16.095 15.505-5.857 37.688-.441 50.647 27.19Z"/>
          </svg>
          <div class="install-button">
          <i>sounds cool?</i>
          <a href="https://github.com/nik-rev/ferrishot?tab=readme-ov-file#installation">Install<svg height="16px" width="16px" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 9h-4V3H9v6H5l7 8zM4 19h16v2H4z"></path></svg>
          </a>
        </div>
      </div>
    </main>
    <style>
      footer {
        --spike-angle: 90deg;
        --spike-size: 10px;

        height: calc(var(--spike-size) + 150px);
        width: 100%;
        background-color: var(--background-dark);
        display: flex;
        justify-content: end;
        align-items: center;
        justify-content: center;

        mask: 
          conic-gradient(from calc(180deg - var(--spike-angle)/2) at top,
            #0000,#000 1deg var(--spike-angle),#0000 calc(var(--spike-angle) + 1deg)) 
          50%/var(--spike-size);
        }
    </style>
    <footer>
      <div id="logo">
        <img src="assets/icons/Ferrishot.svg" id="logo" height="48" width="48"></img>
        <h1>ferrishot<h1>
      </div>
    </footer>
  </body>
</html>
